/* pkgPublish/pages/topicDetail/index.wxss */
.container {
  padding: 0 40rpx;
  .title {
    margin: 30rpx 0;
    font-size: var(--utopia_big-size);
    font-weight: 700;
  }
  .detail {
    min-height: 100vh;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      .userinfo {
        display: flex;
        align-items: center;
        .image {
          width: 80rpx;
          height: 80rpx;
          margin-right: 20rpx;
          image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .text {
          font-size: var(--utopia_middle-size);
          color: #3d3d3d;
          .name {
            font-weight: 500;
          }
          .time {
            margin-top: 10rpx;
            color: #7d7c7c;
            font-size: var(--utopia_mini-size);
          }
        }
      }
      .chat {
        width: 80rpx;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        font-size: var(--utopia_mini-size);
        color: #7d7c7c;
        border: 1px solid #7d7c7c;
        border-radius: 20rpx;
      }
    }
    .middle {
      width: 100%;
      .html-content{
        width: 100%;
      }
      .content {
        font-size: var(--utopia_middle-size);
        .tag {
          color: #ff685c;
        }
        .content-text {
          line-height: 32rpx;
          line-break: anywhere;
        }
        &-all-text {
          line-break: anywhere;
        }
        .viewtext {
          display: flex;
          justify-content: flex-end;
          font-size: var(--utopia_small-size);
          color: var(--utopia_font-active);
        }
        .image {
          display: flex;
          flex-wrap: wrap;
          margin-top: 20rpx;
          // max-width: 360rpx;
          // max-height: 360rpx;
        }
        .video {
          width: 100%;
          position: relative;
          // height: 28rpx;
          // height: 360rpx;
          .isvideo {
            width: 100%;
            height: 360rpx;
          }
        }
      }
      .tags {
        margin-top: 10rpx;
      }
    }
  }
  .like-list {
    margin: 20rpx 0;
    min-height: 100vh;
    &-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 40rpx 0;
      border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
      .left {
        display: flex;
        align-items: center;
        .user-text {
          margin-left: 10rpx;
          .nickname {
            font-size: var(--utopia_middle-size);
            font-weight: 500;
          }
          .time {
            font-size: var(--utopia_mini-size);
            color: #7d7c7c;
          }
        }
      }
      .right {
        font-size: var(--utopia_middle-size);
        color: #3d3d3d;
      }
    }
  }
  .collect-list {
    margin: 20rpx 0;
    min-height: 100vh;
    &-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 40rpx 0;
      border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
      .left {
        display: flex;
        align-items: center;
        .user-text {
          margin-left: 10rpx;
          .nickname {
            font-size: var(--utopia_middle-size);
            font-weight: 500;
          }
          .time {
            font-size: var(--utopia_mini-size);
            color: #7d7c7c;
          }
        }
      }
      .right {
        font-size: var(--utopia_middle-size);
        color: #3d3d3d;
      }
    }
  }
  .reward-list {
    margin: 20rpx 0;
    min-height: 100vh;
    &-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 40rpx 0;
      border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
      .left {
        display: flex;
        align-items: center;
        .user-text {
          margin-left: 10rpx;
          .nickname {
            font-size: var(--utopia_middle-size);
            font-weight: 500;
          }
          .time {
            font-size: var(--utopia_mini-size);
            color: #7d7c7c;
          }
        }
      }
      .right {
        font-size: var(--utopia_middle-size);
        color: #3d3d3d;
      }
    }
  }
  .comment {
    min-height: 100vh;
    &-title {
      font-size: var(--utopia_small-size);
      font-weight: 500;
    }
    &-items {
      margin-top: 20rpx;
      .like {
        color: var(--utopia_font-active);
      }
      .items-fa {
        display: flex;
        .right {
          margin-left: 10rpx;
          font-size: var(--utopia_small-size);
          &-title {
            display: flex;
            color: #3d3d3d;
            font-weight: 500;
            font-size: var(--utopia_middle-size);
          }
          &-content {
            width: 600rpx;
            word-break: break-all;
            font-size: var(--utopia_small-size);
            line-height: 36rpx;
            margin: 10rpx 0;
          }
          &-status {
            display: flex;
            justify-content: space-between;
            padding-right: 24rpx;
            color: var(--utopia_font-normal);
            .reply {
              color: #3d3d3d;
              margin-left: 20rpx;
            }
            .del {
              margin-left: 20rpx;
            }
          }
        }
      }
      .items-children {
        padding: 0 60rpx;
        margin-top: 16rpx;
        font-size: var(--utopia_small-size);
        &-item {
          display: flex;
          .right {
            margin-left: 10rpx;
            &-title {
              display: flex;
              align-items: center;
              font-size: var(--utopia_middle-size);
              font-weight: 500;
              color: #3d3d3d;
            }
            &-content {
              width: 550rpx;
              word-break: break-all;
              font-size: var(--utopia_small-size);
              line-height: 36rpx;
              margin: 10rpx 0;
            }
            &-status {
              display: flex;
              justify-content: space-between;
              padding-right: 24rpx;
              color: #7d7c7c;
              .reply {
                color: #3d3d3d;
                margin-left: 20rpx;
              }
            }
          }
        }
      }
    }
    .author {
      margin-left: 10rpx;
      padding: 4rpx 8rpx;
      font-size: var(--utopia_mini-size);
      background-color: #f5f5f5;
      border-radius: 20rpx;
    }
  }
  .event {
    height: 100vh;
    .title {
      height: 50rpx;
      display: flex;
      justify-content: space-between;
      font-size: var(--utopia_middle-size);
      .comment {
        font-size: var(--utopia_small-size);
        color: #7d7c7c;
      }
    }
    .steps {
      .item {
        display: flex;
        .left {
          margin-right: 30rpx;
          font-size: 20rpx;
        }
        .right {
          .time {
            color: var(--utopia_font-normal);
            font-size: var(--utopia_mini-size);
          }
          .content {
            font-size: var(--utopia_middle-size);
            margin-bottom: 40rpx;
          }
          .image {
            width: 200rpx;
            height: 200rpx;
            background-color: #ff685c;
          }
        }
      }
    }
    .van-step__icon {
      font-size: 40rpx;
    }
    .van-step__line {
      background-color: #dadada !important;
    }
    .van-step__title {
      margin-left: 22rpx;
      font-size: var(--utopia_mini-size);
      color: #7d7c7c !important;
      .desc {
        margin-top: 12rpx;
        font-size: var(--utopia_small-size);
        color: #3d3d3d;
      }
    }
  }
  .nav {
    position: fixed;
    z-index: 10;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 180rpx;
    padding: 6rpx 20rpx 0;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 2rpx -2rpx 0px 0px #0000001a;
    .top-input {
      display: flex;
      .input {
        flex: 1;
        height: 70rpx;
        padding: 0 20rpx;
        font-size: var(--utopia_big-size);
        background-color: #f5f5f5;
        border-radius: 25rpx;
      }
      .icon-emoji {
        margin: 10rpx 20rpx 0 30rpx;
      }
    }
    .top-button {
      width: 150rpx;
      font-size: 30rpx;
      height: 70rpx;
      border-radius: 10rpx;
    }
    .operate {
      button::after {
        border: none;
      }
      button {
        background-color: #fff;
      }
      display: flex;
      justify-content: space-between;
      margin-top: 10rpx;
      button {
        font-size: var(--utopia_big-size);
        color: var(--utopia_font-normal);
        margin: 0;
      }
      .active {
        color: var(--utopia_font-active);
      }
    }
  }
  .block {
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    height: env(safe-area-inset-bottom);
  }
  .van-divider {
    margin: 10rpx 0 0 0;
  }
}
.popup-header {
  display: flex;
  justify-content: space-between;
  font-size: 40rpx;
  .right {
    color: var(--utopia_font-active);
  }
}
.popup-content {
  .input {
    min-height: 200rpx;
  }
  .add-image {
    .image {
      position: relative;
      width: 300rpx;
      .del {
        position: absolute;
        right: 10rpx;
        top: 10rpx;
        width: 40rpx;
        height: 40rpx;
        color: #f5f5f5;
        text-align: center;
        font-size: var(--utopia_small-size);
        line-height: 42rpx;
        background-color: #ff685c;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
      }
    }
  }
}
